import styled from 'styled-components'

export const HeaderWarpper = styled.div`
	&.fixed {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 99;
	}

	> .content {
		position: relative;
		z-index: 19;
		background: ${props => (props.theme.isAlpha ? 'linear-gradient(rgba(0,0,0, .5), rgba(255, 255, 255, 0))' : '#fff')};
		font-size: 14px;
		/* border-bottom: 1px solid #eee; */
		border-bottom: ${props => (props.theme.isAlpha ? 'none' : '1px solid #eee')};
		transition: all 100ms ease;

		> .top {
			display: flex;
			align-items: center;
			height: 80px;
		}
	}

	.cover {
		position: fixed;
		z-index: 9;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}
`

export const SearchAreaWrapper = styled.div`
	background: ${props => (props.theme.isAlpha ? 'rgba(255, 255, 255, 0)' : '#fff')};
	height: ${props => (props.isSearch ? '100px' : '0')};
	transition: height 200ms ease;
`
